<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    {% include 'common/echart_base.html' %}

    <title>Echart的事件和行为</title>
</head>
<body>

<div id="echart_event" style="margin:0 auto;width: 600px;height: 400px;border: 1px solid ghostwhite;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        //内置主题样式：默认，‘light’，‘dark’
        var myChart = echarts.init(document.getElementById('echart_event'),'dark');

        itemStyle={
            normal: {
                color: 'rgb(0,100,200)',
                // 阴影的大小
                shadowBlur: 10,
                // 阴影水平方向上的偏移
                shadowOffsetX: 5,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 5,
                // 阴影颜色
                shadowColor: 'rgba(0, 200, 20, 0.7)'
            },
            //鼠标 hover 的时候
            emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.7)'
            }
        }

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 事件和行为'
            },
            tooltip: {},
            toolbox:{
                show:true,
                feature:{
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    //图片下载名称
                    saveAsImage: {name:'示例'},
                }
            },
            legend: {
                data:['销量']
            },
            xAxis: {
                axisLabel:{
                    color:'#ff8015',
                    fontFamily:'微软雅黑',
                    //fontWeight:'bold',
                    fontSize:15,
                    rotate:90
                },
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                symbolSize:[20,20],
                data: [
                    {value:5,itemStyle:itemStyle},
                    //5,
                    20, 36, 10, 10, 20
                ]
            }]
        };

        console.log(echarts.version);
        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);
        
        myChart.on('click',function (params) {
            alert(
                params.seriesName+":\n"+
                params.name
            );
        });
        
        myChart.on('legendselectchanged',function (params) {
            var selected=params.selected[params.name];
            // 在控制台中打印
            alert("所有图例："+JSON.stringify(params.selected)+"\n"+(selected ? '选中了' : '取消选中了') + '图例' + params.name);
            // 打印所有图例的状态
            console.log(params.selected);
        })
        
        /*
        myChart.on('mouseover',function(params) {
            if (params.componetType=='xAxis'){
                alert('xAxis.category:'+params.seriesName+"-"+params.seriesIndex+"\n"+params.name);
            }else if (params.componentType=='series') {
                alert('series:'+params.seriesName+"-"+params.seriesIndex+"\n"+params.name);
            }
        });
        */
        
    </script>
</body>
</html>